<template>
    <div>
        <h2>
            {{ stringA[1].content  }}
        </h2>
        <button @click="print">
            开始
        </button>
    </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';
import type chatMessage from '@/tool/interface';



const stringA = ref<chatMessage[]>([{id:'1',is_robot:false,content:''}]);
const stringB = ref("苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。");

function print() {
  
  console.log(stringA.value.length, stringB.value.length);
  if (stringA.value.length >= stringB.value.length) {
  // 退出递归
    return;
  } else {
  // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(()=>{
        //.charAt()用于获取字符串指定位置的字符
        stringA.value[stringA.value.length-1].content += stringB.value.charAt(stringA.value[stringA.value.length-1].content.length);
      print();
    }, 50);
  }
}

onBeforeMount(()=>{
  stringA.value.push({id:'2',is_robot:false,content:''});
})

</script>
<style>
</style>